<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>highlight.scss</title>
<meta name="generator" content="KF5::SyntaxHighlighting - Definition (SCSS) - Theme (Breeze Dark)"/>
</head><body style="background-color:#232629;color:#cfcfc2"><pre>
<span style="color:#7a7c7d;">/**</span>
<span style="color:#7a7c7d;"> * This is a pseudo SCSS file to test Kate's SCSS syntax highlighting.</span>
<span style="color:#7a7c7d;"> */</span>

<span style="color:#27ae60;">@import</span> <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">&quot;othersheet.css&quot;</span><span style="color:#8e44ad;">)</span> <span style="color:#f67400;">screen</span>, tv;

body {
	<span style="font-weight:bold;">font-size</span>: <span style="color:#f67400;">15</span><span style="color:#2980b9;">pt</span>;
	<span style="font-weight:bold;">font-family</span>: Verdana, Helvetica, <span style="color:#f44f4f;">&quot;Bitstream Vera Sans&quot;</span>, <span style="color:#f67400;">sans-serif</span>;
	<span style="font-weight:bold;">margin-top</span>: <span style="color:#f67400;">0</span><span style="color:#2980b9;">px</span>;			<span style="color:#7a7c7d;">/* yet another comment */</span>
	<span style="font-weight:bold;">margin-bottom</span>: <span style="color:#f67400;">0</span><span style="color:#2980b9;">px</span>;
	<span style="font-weight:bold;">margin-left</span>: <span style="color:#f67400;">0</span><span style="color:#2980b9;">px</span>;
	<span style="font-weight:bold;">margin-right</span>: <span style="color:#f67400;">0</span><span style="color:#2980b9;">px</span>;
}

<span style="color:#8e44ad;">.something</span>
{
	<span style="font-weight:bold;">margin-right</span>: <span style="color:#f67400;">0</span><span style="color:#2980b9;">px</span>;
	<span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">#cdd</span>;
	<span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">#AAFE04</span>;
	<span style="font-weight:bold;">color</span>: <span style="color:#8e44ad;">rgb(</span><span style="color:#f67400;">10</span><span style="color:#2980b9;">%</span>,<span style="color:#f67400;">30</span><span style="color:#2980b9;">%</span>,<span style="color:#f67400;">43</span><span style="color:#2980b9;">%</span><span style="color:#8e44ad;">)</span>;
	<span style="font-weight:bold;">background</span>: <span style="color:#27aeae;font-weight:bold;">maroon</span>;
}

a<span style="color:#c45b00;font-style:italic;">:hover</span> {
}

<span style="color:#27ae60;font-weight:bold;">#header</span>,
p<span style="color:#8e44ad;">.intro</span><span style="color:#c45b00;font-style:italic;">:first-letter</span>,
p<span style="color:#c45b00;font-style:italic;">:lang(nl)</span>,
img<span style="color:#0099ff;font-weight:bold;">[align</span>=<span style="color:#f44f4f;">&quot;right&quot;</span><span style="color:#0099ff;font-weight:bold;">]</span>
{
	<span style="font-weight:bold;">border</span>: <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">solid</span> Qt::<span style="color:#27aeae;font-weight:bold;">red</span> <span style="color:#2980b9;">!important</span>;
	<span style="font-weight:bold;">-moz-border-radius</span>: <span style="color:#f67400;">15</span><span style="color:#2980b9;">px</span>; <span style="color:#7a7c7d;">/* unknown properties render italic */</span>
}

<span style="color:#27ae60;">@media</span> <span style="color:#f67400;">print</span> {

	<span style="color:#27ae60;font-weight:bold;">#header</span>
	{
		<span style="font-weight:bold;">display</span>: <span style="color:#f67400;">none</span>;
	}

}

<span style="color:#7a7c7d;">/*</span>
<span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">TODO</span><span style="color:#7a7c7d;">: add more tests, e.g. media</span>
<span style="color:#7a7c7d;">*/</span>


<span style="color:#8e44ad;">.nice-look</span> {
	<span style="font-weight:bold;">font-variant-alternates</span>: <span style="color:#8e44ad;">styleset(</span>nice-style<span style="color:#8e44ad;">)</span>;
}

ul {
	<span style="font-weight:bold;">list-style</span>: thumbs;
}

<span style="color:#7a7c7d;">/* SVG &lt;a&gt; */</span>
svg|a {}

<span style="color:#7a7c7d;">/* XHTML and SVG &lt;a&gt; */</span>
*|a {}

*{}
<span style="color:#8e44ad;">.class</span>{}
<span style="color:#27ae60;font-weight:bold;">#id</span>{}
<span style="color:#c45b00;font-style:italic;">:hover</span>{}
<span style="color:#c45b00;font-style:italic;">:lang(fr)</span>{}
E{}
E F{}
E&gt;F{}
E &gt; F{}
E~F{}
E ~ F{}
E<span style="color:#c45b00;font-style:italic;">:first-child</span>{}
E<span style="color:#c45b00;font-style:italic;">:visited</span>{}
E<span style="color:#c45b00;font-style:italic;">::after</span>{}
E<span style="color:#c45b00;font-style:italic;">:lang(c)</span>{}
E<span style="color:#c45b00;font-style:italic;">:lang(fr-ca)</span>{}
E + F{}
E+F{}
E<span style="color:#0099ff;font-weight:bold;">[foo]</span>{}
E<span style="color:#0099ff;font-weight:bold;">[foo</span>=<span style="color:#f44f4f;">warning</span><span style="color:#0099ff;font-weight:bold;">]</span>{}
E<span style="color:#0099ff;font-weight:bold;">[foo</span>=<span style="color:#f44f4f;">&quot;warning&quot;</span><span style="color:#0099ff;font-weight:bold;">]</span>{}
E<span style="color:#0099ff;font-weight:bold;">[foo</span>~=<span style="color:#f44f4f;">&quot;warning&quot;</span><span style="color:#0099ff;font-weight:bold;">]</span>{}
E<span style="color:#0099ff;font-weight:bold;">[foo</span>^=<span style="color:#f44f4f;">&quot;warning&quot;</span><span style="color:#0099ff;font-weight:bold;">]</span>{}
E<span style="color:#0099ff;font-weight:bold;">[foo</span>$=<span style="color:#f44f4f;">&quot;warning&quot;</span><span style="color:#0099ff;font-weight:bold;">]</span>{}
E<span style="color:#0099ff;font-weight:bold;">[foo</span>*=<span style="color:#f44f4f;">&quot;warning&quot;</span><span style="color:#0099ff;font-weight:bold;">]</span>{}
E<span style="color:#0099ff;font-weight:bold;">[lang</span>|=<span style="color:#f44f4f;">&quot;en&quot;</span><span style="color:#0099ff;font-weight:bold;">]</span>{}
DIV<span style="color:#8e44ad;">.warning</span>{}
DIV <span style="color:#8e44ad;">.warning</span>{}
E<span style="color:#27ae60;font-weight:bold;">#myid</span>{}
E <span style="color:#27ae60;font-weight:bold;">#myid</span>{}
E,E{}
E, E{}
E ,E{}
E , E{}

p<span style="color:#c45b00;font-style:italic;">:nth-child(2)</span> {
	<span style="font-weight:bold;">background</span>: <span style="color:#27aeae;font-weight:bold;">red</span>;
}

<span style="color:#7a7c7d;">/* Elements that are not &lt;div&gt; or &lt;span&gt; elements */</span>
body <span style="color:#c45b00;font-style:italic;">:not(</span>div<span style="color:#c45b00;font-style:italic;">):not(</span>span<span style="color:#c45b00;font-style:italic;">)</span> {
	<span style="font-weight:bold;">font-weight</span>: <span style="color:#f67400;">bold</span>;
}

<span style="color:#7a7c7d;">/* Elements that are not `.crazy` or `.fancy` */</span>
<span style="color:#7a7c7d;">/* Note that this syntax is not well supported yet. */</span>
body <span style="color:#c45b00;font-style:italic;">:not(</span><span style="color:#8e44ad;">.crazy</span><span style="color:#da4453;text-decoration:underline;">,</span> <span style="color:#8e44ad;">.fancy</span><span style="color:#c45b00;font-style:italic;">)</span> {
	<span style="font-weight:bold;">font-family</span>: <span style="color:#f67400;">sans-serif</span>;
}

<span style="color:#c45b00;font-style:italic;">:nth-child(odd)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">lime</span>; }
<span style="color:#c45b00;font-style:italic;">:nth-child(even)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">lime</span>; }
<span style="color:#c45b00;font-style:italic;">:nth-child(4)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">lime</span>; }
<span style="color:#c45b00;font-style:italic;">:nth-child(4n)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">lime</span>; }
<span style="color:#c45b00;font-style:italic;">:nth-child(3n+4)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">lime</span>; }
<span style="color:#c45b00;font-style:italic;">:nth-child(-n+3)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">lime</span>; }
<span style="color:#c45b00;font-style:italic;">:nth-child(n+8):nth-child(-n+15)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">lime</span>; }

<span style="color:#8e44ad;">.first</span> span<span style="color:#c45b00;font-style:italic;">:nth-child(2n+1)</span>,
<span style="color:#8e44ad;">.second</span> span<span style="color:#c45b00;font-style:italic;">:nth-child(2n+1)</span>,
<span style="color:#8e44ad;">.third</span> span<span style="color:#c45b00;font-style:italic;">:nth-of-type(2n+1)</span> {
	<span style="font-weight:bold;">background-color</span>: <span style="color:#27aeae;font-weight:bold;">lime</span>;
	unknown-property: <span style="color:#27aeae;font-weight:bold;">lime</span>;
}

<span style="color:#c45b00;font-style:italic;">:root</span>{
	<span style="color:#27aeae;">--foo</span>: <span style="color:#8e44ad;">if(</span>x &gt; <span style="color:#f67400;">5</span><span style="color:#8e44ad;">)</span> this.width = <span style="color:#f67400;">10</span>; <span style="color:#7a7c7d;">/* valid custom property, invalid in any normal property */</span>
}

<span style="color:#c45b00;font-style:italic;">:root</span>,
<span style="color:#c45b00;font-style:italic;">:root:lang(en)</span> {<span style="color:#27aeae;">--external-link</span>: <span style="color:#f44f4f;">&quot;external link&quot;</span>;}
<span style="color:#c45b00;font-style:italic;">:root:lang(de)</span> {<span style="color:#27aeae;">--external-link</span>: <span style="color:#f44f4f;">&quot;externer Link&quot;</span>;}

a<span style="color:#0099ff;font-weight:bold;">[href</span>^=<span style="color:#f44f4f;">&quot;http&quot;</span><span style="color:#0099ff;font-weight:bold;">]</span><span style="color:#c45b00;font-style:italic;">::after</span> {<span style="font-weight:bold;">content</span>: <span style="color:#f44f4f;">&quot; (&quot;</span> <span style="color:#8e44ad;">var(</span><span style="color:#27aeae;">--external-link</span><span style="color:#8e44ad;">)</span> <span style="color:#f44f4f;">&quot;)&quot;</span>}

one   { <span style="color:#27aeae;">--foo</span>: <span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span>; }
two   { <span style="color:#27aeae;">--bar</span>: <span style="color:#8e44ad;">calc(var(</span><span style="color:#27aeae;">--foo</span><span style="color:#8e44ad;">)</span> + <span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>; }
three { <span style="color:#27aeae;">--foo</span>: <span style="color:#8e44ad;">calc(var(</span><span style="color:#27aeae;">--bar</span><span style="color:#8e44ad;">)</span> + <span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>; }
<span style="color:#8e44ad;">.foo</span> {
	<span style="color:#27aeae;">--gap</span>: <span style="color:#f67400;">20</span>;
	<span style="font-weight:bold;">margin-top</span>: <span style="color:#8e44ad;">var(</span><span style="color:#27aeae;">--gap</span><span style="color:#8e44ad;">)</span>px; <span style="color:#7a7c7d;">/*20 px*/</span>
	<span style="font-weight:bold;">margin-top</span>: <span style="color:#8e44ad;">calc(var(</span><span style="color:#27aeae;">--gap</span><span style="color:#8e44ad;">)</span> * <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>; <span style="color:#7a7c7d;">/*20px*/</span>
}

foo {
	<span style="font-weight:bold;">width</span>: <span style="color:#8e44ad;">calc(</span><span style="color:#f67400;">50</span><span style="color:#2980b9;">%</span> -<span style="color:#f67400;">8</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>; <span style="color:#7a7c7d;">/* invalid */</span>
	<span style="font-weight:bold;">width</span>: <span style="color:#8e44ad;">calc(</span><span style="color:#f67400;">50</span><span style="color:#2980b9;">%</span>- <span style="color:#f67400;">8</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>; <span style="color:#7a7c7d;">/* invalid */</span>
	<span style="font-weight:bold;">width</span>: <span style="color:#8e44ad;">calc(</span><span style="color:#f67400;">50</span><span style="color:#2980b9;">%</span> +<span style="color:#f67400;">8</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>; <span style="color:#7a7c7d;">/* invalid */</span>
	<span style="font-weight:bold;">width</span>: <span style="color:#8e44ad;">calc(</span><span style="color:#f67400;">50</span><span style="color:#2980b9;">%</span>+ <span style="color:#f67400;">8</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>; <span style="color:#7a7c7d;">/* invalid */</span>
	<span style="font-weight:bold;">width</span>: <span style="color:#8e44ad;">calc(</span><span style="color:#f67400;">2</span><span style="color:#2980b9;">px</span> <span style="color:#8e44ad;">-var(</span>--a<span style="color:#8e44ad;">))</span>; <span style="color:#7a7c7d;">/* invalid */</span>
	<span style="font-weight:bold;">width</span>: <span style="color:#8e44ad;">calc(</span><span style="color:#f67400;">50</span><span style="color:#2980b9;">%</span>*-<span style="color:#f67400;">8</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>;
	<span style="font-weight:bold;">width</span>: <span style="color:#8e44ad;">calc(</span><span style="color:#f67400;">50</span><span style="color:#2980b9;">%</span> - <span style="color:#f67400;">8</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>;
	<span style="font-weight:bold;">width</span>: <span style="color:#8e44ad;">calc(</span><span style="color:#f67400;">50</span><span style="color:#2980b9;">%</span> + -<span style="color:#f67400;">8</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>;
	<span style="font-weight:bold;">width</span>: <span style="color:#8e44ad;">calc(</span><span style="color:#f67400;">50</span><span style="color:#2980b9;">%</span> +(<span style="color:#f67400;">8</span><span style="color:#2980b9;">px</span>)<span style="color:#8e44ad;">)</span>;
	<span style="font-weight:bold;">width</span>: <span style="color:#8e44ad;">calc(</span><span style="color:#f67400;">2</span><span style="color:#2980b9;">px</span> -(<span style="color:#8e44ad;">var(</span><span style="color:#27aeae;">--a</span><span style="color:#8e44ad;">)</span>)<span style="color:#8e44ad;">)</span>;
}

sweet-alert input<span style="color:#c45b00;font-style:italic;">:focus::-moz-placeholder</span> {
	<span style="font-weight:bold;">-webkit-transition</span>: opacity <span style="color:#f67400;">0.3</span><span style="color:#2980b9;">s</span> <span style="color:#f67400;">0.03</span><span style="color:#2980b9;">s</span> <span style="color:#f67400;">ease</span>;
	<span style="font-weight:bold;">transition</span>: opacity <span style="color:#f67400;">0.3</span><span style="color:#2980b9;">s</span> <span style="color:#f67400;">0.03</span><span style="color:#2980b9;">s</span> <span style="color:#f67400;">ease</span>;
	<span style="font-weight:bold;">opacity</span>: <span style="color:#f67400;">0.5</span>;
}


<span style="color:#27ae60;">@font-feature-values</span> Font One {
	<span style="color:#27ae60;">@styleset</span> {
		nice-style: <span style="color:#f67400;">12</span>;
	}
}

<span style="color:#27ae60;">@font-feature-values</span> Font Two {
	<span style="color:#27ae60;">@styleset</span> {
		nice-style: <span style="color:#f67400;">4</span>;
	}
}

<span style="color:#27ae60;">@counter-style</span> thumbs {
	system: cyclic;
	symbols: <span style="color:#f44f4f;">&quot;</span><span style="color:#3daee9;">\1F44D</span><span style="color:#f44f4f;">&quot;</span>;
	suffix: <span style="color:#f44f4f;">&quot; &quot;</span>;
}

<span style="color:#27ae60;">@font-face</span> {
	<span style="font-weight:bold;">font-family</span>: <span style="color:#f44f4f;">&quot;Open Sans&quot;</span>;
	<span style="font-weight:bold;">src</span>: <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">&quot;/fonts/OpenSans-Regular-webfont.woff2&quot;</span><span style="color:#8e44ad;">)</span> <span style="color:#8e44ad;">format(</span><span style="color:#f44f4f;">&quot;woff2&quot;</span><span style="color:#8e44ad;">)</span>,
	<span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">&quot;/fonts/OpenSans-Regular-webfont.woff&quot;</span><span style="color:#8e44ad;">)</span> <span style="color:#8e44ad;">format(</span><span style="color:#f44f4f;">&quot;woff&quot;</span><span style="color:#8e44ad;">)</span>;
}

<span style="color:#27ae60;">@page</span> {
	<span style="font-weight:bold;">margin</span>: <span style="color:#f67400;">1</span><span style="color:#2980b9;">cm</span>;
}

<span style="color:#27ae60;">@page</span> <span style="color:#c45b00;font-style:italic;">:first</span> {
	<span style="font-weight:bold;">margin</span>: <span style="color:#f67400;">2</span><span style="color:#2980b9;">cm</span>;
	<span style="color:#7a7c7d;">/* comments */</span>
	<span style="font-weight:bold;">marks</span>: <span style="color:#f67400;">crop</span> <span style="color:#f67400;">cross</span>;
}

<span style="color:#27ae60;">@page</span> <span style="color:#c45b00;font-style:italic;">:unknown</span> {
	<span style="font-weight:bold;">margin</span>: <span style="color:#f67400;">2</span><span style="color:#2980b9;">cm</span>;
}

<span style="color:#27ae60;">@font-face</span> {
	unknown: <span style="color:#f67400;">2</span><span style="color:#2980b9;">px</span>;
	<span style="color:#7a7c7d;">/* comments */</span>
	<span style="font-weight:bold;">font-family</span>: <span style="color:#f44f4f;">&quot;Bitstream Vera Serif Bold&quot;</span>;
	<span style="font-weight:bold;">src</span>: <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">&quot;/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff&quot;</span><span style="color:#8e44ad;">)</span>;
}

<span style="color:#27ae60;">@viewport</span> {
	<span style="font-weight:bold;">zoom</span>: <span style="color:#f67400;">0.75</span>;
	<span style="color:#7a7c7d;">/* comments */</span>
	<span style="font-weight:bold;">min-zoom</span>: <span style="color:#f67400;">0.5</span>;
	<span style="font-weight:bold;">max-zoom</span>: <span style="color:#f67400;">0.9</span>;
}

<span style="color:#27ae60;">@viewport</span> {
	<span style="font-weight:bold;">orientation</span>: <span style="color:#f67400;">landscape</span>;
	<span style="color:#7a7c7d;">/* comments */</span>
	<span style="font-weight:bold;">orientation</span>: <span style="color:#f67400;">landscape</span>;
}

<span style="color:#27ae60;">@document</span> <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">&quot;https://www.example.com/&quot;</span><span style="color:#8e44ad;">)</span> {
	h1 {
		<span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">green</span>;
	}
}

<span style="color:#27ae60;">@supports</span> (<span style="font-weight:bold;">display</span>: <span style="color:#f67400;">grid</span>) {
	div {
		<span style="font-weight:bold;">display</span>: grid;
	}
}

<span style="color:#27ae60;">@media</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#f67400;">600</span><span style="color:#2980b9;">px</span>) {
	<span style="color:#8e44ad;">.sidebar</span> {
		<span style="font-weight:bold;">display</span>: <span style="color:#f67400;">none</span>;
	}
}

<span style="color:#27ae60;">@import</span> <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">&quot;fineprint.css&quot;</span><span style="color:#8e44ad;">)</span> <span style="color:#f67400;">print</span>;
<span style="color:#27ae60;">@import</span> <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">fineprint.css</span><span style="color:#8e44ad;">)</span> <span style="color:#f67400;">print</span>;
<span style="color:#27ae60;">@import</span> <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">'bluish.css'</span><span style="color:#8e44ad;">)</span> <span style="color:#f67400;">speech</span>;
<span style="color:#27ae60;">@import</span> <span style="color:#f44f4f;">'custom.css'</span>;
<span style="color:#27ae60;">@import</span> <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">&quot;chrome://communicator/skin/&quot;</span><span style="color:#8e44ad;">)</span>;
<span style="color:#27ae60;">@import</span> <span style="color:#f44f4f;">&quot;common.css&quot;</span> <span style="color:#f67400;">screen</span>;
<span style="color:#27ae60;">@import</span> <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">'landscape.css'</span><span style="color:#8e44ad;">)</span> <span style="color:#f67400;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">orientation</span>:<span style="color:#f67400;">landscape</span>);

<span style="color:#27ae60;">@namespace</span> <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">http://www.w3.org/1999/xhtml</span><span style="color:#8e44ad;">)</span>;
<span style="color:#27ae60;">@namespace</span> svg <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">http://www.w3.org/2000/svg</span><span style="color:#8e44ad;">)</span>;

<span style="color:#27ae60;">@keyframes</span> important1 {
	<span style="color:#f67400;">from</span> { <span style="font-weight:bold;">margin-top</span>: <span style="color:#f67400;">50</span><span style="color:#2980b9;">px</span>; }
	<span style="color:#f67400;">50%</span>  { <span style="font-weight:bold;">margin-top</span>: <span style="color:#f67400;">150</span><span style="color:#2980b9;">px</span> <span style="color:#2980b9;">!important</span>; } <span style="color:#7a7c7d;">/* ignored */</span>
	<span style="color:#f67400;">to</span>   { <span style="font-weight:bold;">margin-top</span>: <span style="color:#f67400;">100</span><span style="color:#2980b9;">px</span>; }
}

<span style="color:#27ae60;">@keyframes</span> important2 {
	<span style="color:#f67400;">from</span> { <span style="font-weight:bold;">margin-top</span>: <span style="color:#f67400;">50</span><span style="color:#2980b9;">px</span>;
		<span style="font-weight:bold;">margin-bottom</span>: <span style="color:#f67400;">100</span><span style="color:#2980b9;">px</span>; }
	<span style="color:#f67400;">to</span>   { <span style="font-weight:bold;">margin-top</span>: <span style="color:#f67400;">150</span><span style="color:#2980b9;">px</span> <span style="color:#2980b9;">!important</span>; <span style="color:#7a7c7d;">/* ignored */</span>
		<span style="font-weight:bold;">margin-bottom</span>: <span style="color:#f67400;">50</span><span style="color:#2980b9;">px</span>; }
}

<span style="color:#27ae60;">@keyframes</span> slidein {
	<span style="color:#f67400;">from</span> {
		<span style="font-weight:bold;">margin-left</span>: <span style="color:#f67400;">100</span><span style="color:#2980b9;">%</span>;
		<span style="font-weight:bold;">width</span>: <span style="color:#f67400;">300</span><span style="color:#2980b9;">%</span>;
	}

	<span style="color:#f67400;">to</span> {
		<span style="font-weight:bold;">margin-left</span>: <span style="color:#f67400;">0</span><span style="color:#2980b9;">%</span>;
		<span style="font-weight:bold;">width</span>: <span style="color:#f67400;">100</span><span style="color:#2980b9;">%</span>;
	}
}

<span style="color:#27ae60;">@media</span> <span style="color:#f67400;">print</span> {
	a<span style="color:#c45b00;font-style:italic;">:hover</span> { <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">red</span> }
	<span style="color:#7a7c7d;">/* comments */</span>
	a<span style="color:#c45b00;font-style:italic;">:hover</span> { <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">red</span> }
}

<span style="color:#7a7c7d;">/**</span>
<span style="color:#7a7c7d;"> * SCSS https://sass-lang.com/documentation/file.SASS_REFERENCE.html</span>
<span style="color:#7a7c7d;"> */</span>

<span style="color:#27ae60;font-weight:bold;">#main</span> p {
  <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">#00ff00</span>;
  <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">97</span><span style="color:#2980b9;">%</span>;

  <span style="color:#8e44ad;">.redbox</span> {
    <span style="font-weight:bold;">background-color</span>: <span style="color:#27aeae;font-weight:bold;">#ff0000</span>;
    <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">#000000</span>;
  }
}

a {
  <span style="font-weight:bold;">font-weight</span>: <span style="color:#f67400;">bold</span>;
  <span style="font-weight:bold;">text-decoration</span>: <span style="color:#f67400;">none</span>;
  &amp;<span style="color:#c45b00;font-style:italic;">:hover</span> { <span style="font-weight:bold;">text-decoration</span>: <span style="color:#f67400;">underline</span>; }
  body<span style="color:#8e44ad;">.firefox</span> &amp; { <span style="font-weight:bold;">font-weight</span>: <span style="color:#f67400;">normal</span>; }
}

<span style="color:#27ae60;font-weight:bold;">#main</span> {
  <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">black</span>;
  a {
    <span style="font-weight:bold;">font-weight</span>: <span style="color:#f67400;">bold</span>;
    &amp;<span style="color:#c45b00;font-style:italic;">:hover</span> { <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">red</span>; }
  }
}

<span style="color:#27ae60;font-weight:bold;">#main</span> {
  <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">black</span>;
  &amp;-sidebar { <span style="font-weight:bold;">border</span>: <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">solid</span>; }
}

<span style="color:#8e44ad;">.funky</span> {
  <span style="font-weight:bold;">font</span>: {
    <span style="font-weight:bold;">family</span>: <span style="color:#f67400;">fantasy</span>;
    <span style="font-weight:bold;">size</span>: <span style="color:#f67400;">30</span><span style="color:#2980b9;">em</span>;
    <span style="font-weight:bold;">weight</span>: <span style="color:#f67400;">bold</span>;
  }
}

<span style="color:#8e44ad;">.funky</span> {
  <span style="font-weight:bold;">font</span>: <span style="color:#f67400;">20</span><span style="color:#2980b9;">px</span>/<span style="color:#f67400;">24</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">fantasy</span> {
    <span style="font-weight:bold;">weight</span>: <span style="color:#f67400;">bold</span>;
  }
}

<span style="color:#7a7c7d;">/* This comment is</span>
<span style="color:#7a7c7d;"> * several lines long.</span>
<span style="color:#7a7c7d;"> * since it uses the CSS comment syntax,</span>
<span style="color:#7a7c7d;"> * it will appear in the CSS output. */</span>
body { <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">black</span>; }

<span style="color:#7a7c7d;">// These comments are only one line long each.</span>
<span style="color:#7a7c7d;">// They won't appear in the CSS output,</span>
<span style="color:#7a7c7d;">// since they use the single-line comment syntax.</span>
a { <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">green</span>; }

<span style="color:#27aeae;">$version</span>: <span style="color:#f44f4f;">&quot;1.2.3&quot;</span>;
<span style="color:#7a7c7d;">/* This CSS is generated by My Snazzy Framework version #{$version}. */</span>

<span style="color:#27aeae;">$width</span>: <span style="color:#f67400;">5</span><span style="color:#2980b9;">em</span>;

<span style="color:#27ae60;font-weight:bold;">#main</span> {
  <span style="font-weight:bold;">width</span>: <span style="color:#27aeae;">$width</span>;
}

<span style="color:#27ae60;font-weight:bold;">#main</span> {
  <span style="color:#27aeae;">$width</span>: <span style="color:#f67400;">5</span><span style="color:#2980b9;">em</span> <span style="color:#2980b9;">!global</span>;
  <span style="font-weight:bold;">width</span>: <span style="color:#27aeae;">$width</span>;
}

<span style="color:#27ae60;font-weight:bold;">#sidebar</span> {
  <span style="font-weight:bold;">width</span>: <span style="color:#27aeae;">$width</span>;
}

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">firefox-message</span>(<span style="color:#27aeae;">$selector</span>) {
  body<span style="color:#8e44ad;">.firefox</span> #{<span style="color:#27aeae;">$selector</span>}<span style="color:#c45b00;font-style:italic;">:before</span> {
    <span style="font-weight:bold;">content</span>: <span style="color:#f44f4f;">&quot;Hi, Firefox users!&quot;</span>;
  }
}

<span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">firefox-message(</span><span style="color:#f44f4f;">&quot;.header&quot;</span><span style="color:#8e44ad;">)</span>;

<span style="color:#27aeae;">$map</span>: (key1: value1, key2: value2, key3: value3);

p {
  <span style="font-weight:bold;">font</span>: <span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span>/<span style="color:#f67400;">8</span><span style="color:#2980b9;">px</span>;             <span style="color:#7a7c7d;">// Plain CSS, no division</span>
  <span style="color:#27aeae;">$width</span>: <span style="color:#f67400;">1000</span><span style="color:#2980b9;">px</span>;
  <span style="font-weight:bold;">width</span>: <span style="color:#27aeae;">$width</span>/<span style="color:#f67400;">2</span>;            <span style="color:#7a7c7d;">// Uses a variable, does division</span>
  <span style="font-weight:bold;">width</span>: <span style="color:#8e44ad;">round(</span><span style="color:#f67400;">1.5</span><span style="color:#8e44ad;">)</span>/<span style="color:#f67400;">2</span>;        <span style="color:#7a7c7d;">// Uses a function, does division</span>
  <span style="font-weight:bold;">height</span>: (<span style="color:#f67400;">500</span><span style="color:#2980b9;">px</span>/<span style="color:#f67400;">2</span>);          <span style="color:#7a7c7d;">// Uses parentheses, does division</span>
  <span style="font-weight:bold;">margin-left</span>: <span style="color:#f67400;">5</span><span style="color:#2980b9;">px</span> + <span style="color:#f67400;">8</span><span style="color:#2980b9;">px</span>/<span style="color:#f67400;">2</span><span style="color:#2980b9;">px</span>; <span style="color:#7a7c7d;">// Uses +, does division</span>
  <span style="font-weight:bold;">font</span>: (<span style="color:#f67400;">italic</span> <span style="color:#f67400;">bold</span> <span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span>/<span style="color:#f67400;">8</span><span style="color:#2980b9;">px</span>); <span style="color:#7a7c7d;">// In a list, parentheses don't count</span>
}

p {
  <span style="color:#27aeae;">$font-size</span>: <span style="color:#f67400;">12</span><span style="color:#2980b9;">px</span>;
  <span style="color:#27aeae;">$line-height</span>: <span style="color:#f67400;">30</span><span style="color:#2980b9;">px</span>;
  <span style="font-weight:bold;">font</span>: #{<span style="color:#27aeae;">$font-size</span>}/#{<span style="color:#27aeae;">$line-height</span>};
}

p {
  <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">#010203</span> + <span style="color:#27aeae;font-weight:bold;">#040506</span>;
  <span style="font-weight:bold;">color</span>: <span style="color:#8e44ad;">rgba(</span><span style="color:#f67400;">255</span>, <span style="color:#f67400;">0</span>, <span style="color:#f67400;">0</span>, <span style="color:#f67400;">0.75</span><span style="color:#8e44ad;">)</span> + <span style="color:#8e44ad;">rgba(</span><span style="color:#f67400;">0</span>, <span style="color:#f67400;">255</span>, <span style="color:#f67400;">0</span>, <span style="color:#f67400;">0.75</span><span style="color:#8e44ad;">)</span>;
}

<span style="color:#27aeae;">$translucent-red</span>: <span style="color:#8e44ad;">rgba(</span><span style="color:#f67400;">255</span>, <span style="color:#f67400;">0</span>, <span style="color:#f67400;">0</span>, <span style="color:#f67400;">0.5</span><span style="color:#8e44ad;">)</span>;
p {
  <span style="font-weight:bold;">color</span>: <span style="color:#8e44ad;">opacify(</span><span style="color:#27aeae;">$translucent-red</span>, <span style="color:#f67400;">0.3</span><span style="color:#8e44ad;">)</span>;
  <span style="font-weight:bold;">background-color</span>: <span style="color:#8e44ad;">transparentize(</span><span style="color:#27aeae;">$translucent-red</span>, <span style="color:#f67400;">0.25</span><span style="color:#8e44ad;">)</span>;
}

<span style="color:#27aeae;">$translucent-red</span>: <span style="color:#8e44ad;">rgba(</span><span style="color:#f67400;">255</span>, <span style="color:#f67400;">0</span>, <span style="color:#f67400;">0</span>, <span style="color:#f67400;">0.5</span><span style="color:#8e44ad;">)</span>;
<span style="color:#27aeae;">$green</span>: <span style="color:#27aeae;font-weight:bold;">#00ff00</span>;
div {
  <span style="font-weight:bold;">filter</span>: progid:DXImageTransform.Microsoft.<span style="color:#8e44ad;">gradient(</span>enabled=<span style="color:#f44f4f;">'false'</span>, startColorstr=<span style="color:#f44f4f;">'</span>#{<span style="color:#8e44ad;">ie-hex-str(</span><span style="color:#27aeae;">$green</span><span style="color:#8e44ad;">)</span>}<span style="color:#f44f4f;">'</span>, endColorstr=<span style="color:#f44f4f;">'</span>#{<span style="color:#8e44ad;">ie-hex-str(</span><span style="color:#27aeae;">$translucent-red</span><span style="color:#8e44ad;">)</span>}<span style="color:#f44f4f;">'</span><span style="color:#8e44ad;">)</span>;
}
p {
  <span style="font-weight:bold;">cursor</span>: e + -resize;
}
p<span style="color:#c45b00;font-style:italic;">:before</span> {
  <span style="font-weight:bold;">content</span>: <span style="color:#f44f4f;">&quot;Foo &quot;</span> + Bar;
  <span style="font-weight:bold;">font-family</span>: sans- + <span style="color:#f44f4f;">&quot;serif&quot;</span>;
}
p<span style="color:#c45b00;font-style:italic;">:before</span> {
  <span style="font-weight:bold;">content</span>: <span style="color:#f44f4f;">&quot;I ate </span>#{<span style="color:#f67400;">5</span> + <span style="color:#f67400;">10</span>}<span style="color:#f44f4f;"> pies!&quot;</span>;
}
<span style="color:#27aeae;">$value</span>: <span style="color:#7f8c8d;">null</span>;
p<span style="color:#c45b00;font-style:italic;">:before</span> {
  <span style="font-weight:bold;">content</span>: <span style="color:#f44f4f;">&quot;I ate </span>#{<span style="color:#27aeae;">$value</span>}<span style="color:#f44f4f;"> pies!&quot;</span>;
}
p {
  <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">1</span><span style="color:#2980b9;">em</span> + (<span style="color:#f67400;">2</span><span style="color:#2980b9;">em</span> * <span style="color:#f67400;">3</span>);
}
p {
  <span style="font-weight:bold;">color</span>: <span style="color:#8e44ad;">hsl(</span><span style="color:#27aeae;">$hue</span>: <span style="color:#f67400;">0</span>, <span style="color:#27aeae;">$saturation</span>: <span style="color:#f67400;">100</span><span style="color:#2980b9;">%</span>, <span style="color:#27aeae;">$lightness</span>: <span style="color:#f67400;">50</span><span style="color:#2980b9;">%</span><span style="color:#8e44ad;">)</span>;
}
<span style="color:#27aeae;">$name</span>: foo;
<span style="color:#27aeae;">$attr</span>: border;
p<span style="color:#8e44ad;">.</span>#{<span style="color:#27aeae;">$name</span>} {
  #{<span style="color:#27aeae;">$attr</span>}-color: <span style="color:#27aeae;font-weight:bold;">blue</span>;
}
p {
  <span style="color:#27aeae;">$font-size</span>: <span style="color:#f67400;">12</span><span style="color:#2980b9;">px</span>;
  <span style="color:#27aeae;">$line-height</span>: <span style="color:#f67400;">30</span><span style="color:#2980b9;">px</span>;
  <span style="font-weight:bold;">font</span>: #{<span style="color:#27aeae;">$font-size</span>}/#{<span style="color:#27aeae;">$line-height</span>};
}

<span style="color:#8e44ad;">.foo.bar</span> <span style="color:#8e44ad;">.baz.bang</span>, <span style="color:#8e44ad;">.bip.qux</span> {
    <span style="color:#27aeae;">$selector</span>: &amp;;
}

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">does-parent-exist</span> {
  <span style="color:#27ae60;">@if</span> &amp; {
    &amp;<span style="color:#c45b00;font-style:italic;">:hover</span> {
      <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">red</span>;
    }
  } <span style="color:#27ae60;">@else</span> {
    a {
      <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">red</span>;
    }
  }
}

<span style="color:#27aeae;">$content</span>: <span style="color:#f44f4f;">&quot;First content&quot;</span>;
<span style="color:#27aeae;">$content</span>: <span style="color:#f44f4f;">&quot;Second content?&quot;</span> <span style="color:#2980b9;">!default</span>;
<span style="color:#27aeae;">$new_content</span>: <span style="color:#f44f4f;">&quot;First time reference&quot;</span> <span style="color:#2980b9;">!default</span>;

<span style="color:#27ae60;font-weight:bold;">#main</span> {
  <span style="font-weight:bold;">content</span>: <span style="color:#27aeae;">$content</span>;
  new-content: <span style="color:#27aeae;">$new_content</span>;
}

<span style="color:#27ae60;">@import</span> <span style="color:#f44f4f;">&quot;foo.css&quot;</span>;
<span style="color:#27ae60;">@import</span> <span style="color:#f44f4f;">&quot;foo&quot;</span> <span style="color:#f67400;">screen</span>;
<span style="color:#27ae60;">@import</span> <span style="color:#f44f4f;">&quot;http://foo.com/bar&quot;</span>;
<span style="color:#27ae60;">@import</span> <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">foo</span><span style="color:#8e44ad;">)</span>;

<span style="color:#27aeae;">$family</span>: <span style="color:#8e44ad;">unquote(</span><span style="color:#f44f4f;">&quot;Droid+Sans&quot;</span><span style="color:#8e44ad;">)</span>;
<span style="color:#27ae60;">@import</span> <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">&quot;http://fonts.googleapis.com/css?family=</span>#{<span style="color:#27aeae;">$family</span>}<span style="color:#f44f4f;">&quot;</span><span style="color:#8e44ad;">)</span>;
<span style="color:#27ae60;font-weight:bold;">#main</span> {
  <span style="color:#27ae60;">@import</span> <span style="color:#f44f4f;">&quot;example&quot;</span>;
}

<span style="color:#8e44ad;">.sidebar</span> {
  <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">300</span><span style="color:#2980b9;">px</span>;
  <span style="color:#27ae60;">@media</span> <span style="color:#f67400;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">orientation</span>: <span style="color:#f67400;">landscape</span>) {
    <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">500</span><span style="color:#2980b9;">px</span>;
  }
}
<span style="color:#27ae60;">@media</span> <span style="color:#f67400;">screen</span> {
  <span style="color:#8e44ad;">.sidebar</span> {
    <span style="color:#27ae60;">@media</span> (<span style="font-weight:bold;">orientation</span>: <span style="color:#f67400;">landscape</span>) {
      <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">500</span><span style="color:#2980b9;">px</span>;
    }
  }
}

<span style="color:#27aeae;">$media</span>: screen;
<span style="color:#27aeae;">$feature</span>: -webkit-min-device-pixel-ratio;
<span style="color:#27aeae;">$value</span>: <span style="color:#f67400;">1.5</span>;

<span style="color:#27ae60;">@media</span> #{<span style="color:#27aeae;">$media</span>} <span style="font-weight:bold;">and</span> (<span style="color:#27aeae;">$feature</span>: <span style="color:#27aeae;">$value</span>) {
  <span style="color:#8e44ad;">.sidebar</span> {
    <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">500</span><span style="color:#2980b9;">px</span>;
  }
}

<span style="color:#8e44ad;">.error</span> {
  <span style="font-weight:bold;">border</span>: <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span> <span style="color:#27aeae;font-weight:bold;">#f00</span>;
  <span style="font-weight:bold;">background-color</span>: <span style="color:#27aeae;font-weight:bold;">#fdd</span>;
}
<span style="color:#8e44ad;">.seriousError</span> {
  <span style="color:#27ae60;">@extend</span> <span style="color:#8e44ad;">.error</span>;
  <span style="font-weight:bold;">border-width</span>: <span style="color:#f67400;">3</span><span style="color:#2980b9;">px</span>;
}

<span style="color:#8e44ad;">.hoverlink</span> {
  <span style="color:#27ae60;">@extend</span> a<span style="color:#c45b00;font-style:italic;">:hover</span>;
}
a<span style="color:#c45b00;font-style:italic;">:hover</span> {
  <span style="font-weight:bold;">text-decoration</span>: <span style="color:#f67400;">underline</span>;
}

<span style="color:#27ae60;font-weight:bold;">#context</span> a<span style="color:#7f8c8d;">%extreme</span> a <span style="color:#7f8c8d;">%extreme</span> {
  <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">blue</span>;
  <span style="font-weight:bold;">font-weight</span>: <span style="color:#f67400;">bold</span>;
  <span style="font-weight:bold;">font-size</span>: <span style="color:#f67400;">2</span><span style="color:#2980b9;">em</span>;
}
<span style="color:#8e44ad;">.notice</span> {
  <span style="color:#27ae60;">@extend</span> <span style="color:#7f8c8d;">%extreme</span>;
}

a<span style="color:#8e44ad;">.important</span> {
  <span style="color:#27ae60;">@extend</span> <span style="color:#8e44ad;">.notice</span> !optional;
}

<span style="color:#27ae60;">@media</span> <span style="color:#f67400;">print</span> {
  <span style="color:#8e44ad;">.page</span> {
    <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">8</span><span style="color:#2980b9;">in</span>;
    <span style="color:#27ae60;">@at-root</span> (<span style="font-weight:bold;">without</span>: media) {
      <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">red</span>;
    }
  }
}

<span style="color:#27ae60;">@debug</span> <span style="color:#f67400;">10</span><span style="color:#2980b9;">em</span> + <span style="color:#f67400;">12</span><span style="color:#2980b9;">em</span>;

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">adjust-location</span>(<span style="color:#27aeae;">$x</span>, <span style="color:#27aeae;">$y</span>) {
  <span style="color:#27ae60;">@if</span> <span style="color:#8e44ad;">unitless(</span><span style="color:#27aeae;">$x</span><span style="color:#8e44ad;">)</span> {
    <span style="color:#27ae60;">@warn</span> <span style="color:#f44f4f;">&quot;Assuming </span>#{<span style="color:#27aeae;">$x</span>}<span style="color:#f44f4f;"> to be in pixels&quot;</span>;
    <span style="color:#27aeae;">$x</span>: <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span> * <span style="color:#27aeae;">$x</span>;
  }
  <span style="color:#27ae60;">@if</span> <span style="color:#8e44ad;">unitless(</span><span style="color:#27aeae;">$y</span><span style="color:#8e44ad;">)</span> {
    <span style="color:#27ae60;">@warn</span> <span style="color:#f44f4f;">&quot;Assuming </span>#{<span style="color:#27aeae;">$y</span>}<span style="color:#f44f4f;"> to be in pixels&quot;</span>;
    <span style="color:#27aeae;">$y</span>: <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span> * <span style="color:#27aeae;">$y</span>;
  }
  <span style="font-weight:bold;">position</span>: <span style="color:#f67400;">relative</span>; <span style="font-weight:bold;">left</span>: <span style="color:#27aeae;">$x</span>; <span style="font-weight:bold;">top</span>: <span style="color:#27aeae;">$y</span>;
}

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">adjust-location</span>(<span style="color:#27aeae;">$x</span>, <span style="color:#27aeae;">$y</span>) {
  <span style="color:#27ae60;">@if</span> <span style="color:#8e44ad;">unitless(</span><span style="color:#27aeae;">$x</span><span style="color:#8e44ad;">)</span> {
    <span style="color:#27ae60;">@error</span> <span style="color:#f44f4f;">&quot;$x may not be unitless, was </span>#{<span style="color:#27aeae;">$x</span>}<span style="color:#f44f4f;">.&quot;</span>;
  }
  <span style="color:#27ae60;">@if</span> <span style="color:#8e44ad;">unitless(</span><span style="color:#27aeae;">$y</span><span style="color:#8e44ad;">)</span> {
    <span style="color:#27ae60;">@error</span> <span style="color:#f44f4f;">&quot;$y may not be unitless, was </span>#{<span style="color:#27aeae;">$y</span>}<span style="color:#f44f4f;">.&quot;</span>;
  }
  <span style="font-weight:bold;">position</span>: <span style="color:#f67400;">relative</span>; <span style="font-weight:bold;">left</span>: <span style="color:#27aeae;">$x</span>; <span style="font-weight:bold;">top</span>: <span style="color:#27aeae;">$y</span>;
}

p {
  <span style="color:#27ae60;">@if</span> <span style="color:#f67400;">1</span> + <span style="color:#f67400;">1</span> == <span style="color:#f67400;">2</span> { <span style="font-weight:bold;">border</span>: <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">solid</span>;  }
  <span style="color:#27ae60;">@if</span> <span style="color:#f67400;">5</span> &lt; <span style="color:#f67400;">3</span>      { <span style="font-weight:bold;">border</span>: <span style="color:#f67400;">2</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">dotted</span>; }
  <span style="color:#27ae60;">@if</span> <span style="color:#7f8c8d;">null</span>       { <span style="font-weight:bold;">border</span>: <span style="color:#f67400;">3</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">double</span>; }
}

<span style="color:#27aeae;">$type</span>: monster;
p {
  <span style="color:#27ae60;">@if</span> <span style="color:#27aeae;">$type</span> == ocean {
    <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">blue</span>;
  } <span style="color:#27ae60;">@else</span> <span style="color:#27ae60;">if</span> <span style="color:#27aeae;">$type</span> == matador {
    <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">red</span>;
  } <span style="color:#27ae60;">@else</span> <span style="color:#27ae60;">if</span> <span style="color:#27aeae;">$type</span> == monster {
    <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">green</span>;
  } <span style="color:#27ae60;">@else</span> {
    <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">black</span>;
  }
}

<span style="color:#27ae60;">@for</span> <span style="color:#27aeae;">$i</span> from <span style="color:#f67400;">1</span> through <span style="color:#f67400;">3</span> {
  <span style="color:#8e44ad;">.item-</span>#{<span style="color:#27aeae;">$i</span>} { <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">2</span><span style="color:#2980b9;">em</span> * <span style="color:#27aeae;">$i</span>; }
}

<span style="color:#27ae60;">@each</span> <span style="color:#27aeae;">$animal</span> in puma, sea-slug, egret, salamander {
  <span style="color:#8e44ad;">.</span>#{<span style="color:#27aeae;">$animal</span>}-icon {
    <span style="font-weight:bold;">background-image</span>: <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">'/images/</span>#{<span style="color:#27aeae;">$animal</span>}<span style="color:#f44f4f;">.png'</span><span style="color:#8e44ad;">)</span>;
  }
}

<span style="color:#27ae60;">@each</span> <span style="color:#27aeae;">$animal</span>, <span style="color:#27aeae;">$color</span>, <span style="color:#27aeae;">$cursor</span> in (puma, <span style="color:#27aeae;font-weight:bold;">black</span>, <span style="color:#f67400;">default</span>),
                                  (sea-slug, <span style="color:#27aeae;font-weight:bold;">blue</span>, <span style="color:#f67400;">pointer</span>),
                                  (egret, <span style="color:#27aeae;font-weight:bold;">white</span>, <span style="color:#f67400;">move</span>) {
  <span style="color:#8e44ad;">.</span>#{<span style="color:#27aeae;">$animal</span>}-icon {
    <span style="font-weight:bold;">background-image</span>: <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">'/images/</span>#{<span style="color:#27aeae;">$animal</span>}<span style="color:#f44f4f;">.png'</span><span style="color:#8e44ad;">)</span>;
    <span style="font-weight:bold;">border</span>: <span style="color:#f67400;">2</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">solid</span> <span style="color:#27aeae;">$color</span>;
    <span style="font-weight:bold;">cursor</span>: <span style="color:#27aeae;">$cursor</span>;
  }
}

<span style="color:#27ae60;">@each</span> <span style="color:#27aeae;">$header</span>, <span style="color:#27aeae;">$size</span> in (h1: <span style="color:#f67400;">2</span><span style="color:#2980b9;">em</span>, h2: <span style="color:#f67400;">1.5</span><span style="color:#2980b9;">em</span>, h3: <span style="color:#f67400;">1.2</span><span style="color:#2980b9;">em</span>) {
  #{<span style="color:#27aeae;">$header</span>} {
    <span style="font-weight:bold;">font-size</span>: <span style="color:#27aeae;">$size</span>;
  }
}

<span style="color:#27aeae;">$i</span>: <span style="color:#f67400;">6</span>;
<span style="color:#27ae60;">@while</span> <span style="color:#27aeae;">$i</span> &gt; <span style="color:#f67400;">0</span> {
  <span style="color:#8e44ad;">.item-</span>#{<span style="color:#27aeae;">$i</span>} { <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">2</span><span style="color:#2980b9;">em</span> * <span style="color:#27aeae;">$i</span>; }
  <span style="color:#27aeae;">$i</span>: <span style="color:#27aeae;">$i</span> - <span style="color:#f67400;">2</span>;
}

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">large-text</span> {
  <span style="font-weight:bold;">font</span>: {
    <span style="font-weight:bold;">family</span>: Arial;
    <span style="font-weight:bold;">size</span>: <span style="color:#f67400;">20</span><span style="color:#2980b9;">px</span>;
    <span style="font-weight:bold;">weight</span>: <span style="color:#f67400;">bold</span>;
  }
  <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">#ff0000</span>;
}

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">clearfix</span> {
  <span style="font-weight:bold;">display</span>: <span style="color:#f67400;">inline-block</span>;
  &amp;<span style="color:#c45b00;font-style:italic;">:after</span> {
    <span style="font-weight:bold;">content</span>: <span style="color:#f44f4f;">&quot;.&quot;</span>;
    <span style="font-weight:bold;">display</span>: <span style="color:#f67400;">block</span>;
    <span style="font-weight:bold;">height</span>: <span style="color:#f67400;">0</span>;
    <span style="font-weight:bold;">clear</span>: <span style="color:#f67400;">both</span>;
    <span style="font-weight:bold;">visibility</span>: <span style="color:#f67400;">hidden</span>;
  }
  * html &amp; { <span style="font-weight:bold;">height</span>: <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span> }
}

<span style="color:#8e44ad;">.page-title</span> {
  <span style="color:#27ae60;">@include</span> large-text;
  <span style="font-weight:bold;">padding</span>: <span style="color:#f67400;">4</span><span style="color:#2980b9;">px</span>;
  <span style="font-weight:bold;">margin-top</span>: <span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span>;
}

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">compound</span> {
  <span style="color:#27ae60;">@include</span> highlighted-background;
  <span style="color:#27ae60;">@include</span> header-text;
}

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">highlighted-background</span> { <span style="font-weight:bold;">background-color</span>: <span style="color:#27aeae;font-weight:bold;">#fc0</span>; }
<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">header-text</span> { <span style="font-weight:bold;">font-size</span>: <span style="color:#f67400;">20</span><span style="color:#2980b9;">px</span>; }

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">sexy-border</span>(<span style="color:#27aeae;">$color</span>, <span style="color:#27aeae;">$width</span>) {
  <span style="font-weight:bold;">border</span>: {
    <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;">$color</span>;
    <span style="font-weight:bold;">width</span>: <span style="color:#27aeae;">$width</span>;
    <span style="font-weight:bold;">style</span>: <span style="color:#f67400;">dashed</span>;
  }
}

p { <span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">sexy-border(</span><span style="color:#27aeae;font-weight:bold;">blue</span>, <span style="color:#f67400;">1</span><span style="color:#2980b9;">in</span><span style="color:#8e44ad;">)</span>; }

p { <span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">sexy-border(</span><span style="color:#27aeae;">$color</span>: <span style="color:#27aeae;font-weight:bold;">blue</span><span style="color:#8e44ad;">)</span>; }
h1 { <span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">sexy-border(</span><span style="color:#27aeae;">$color</span>: <span style="color:#27aeae;font-weight:bold;">blue</span>, <span style="color:#27aeae;">$width</span>: <span style="color:#f67400;">2</span><span style="color:#2980b9;">in</span><span style="color:#8e44ad;">)</span>; }


<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">colors</span>(<span style="color:#27aeae;">$text</span>, <span style="color:#27aeae;">$background</span>, <span style="color:#27aeae;">$border</span>) {
  <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;">$text</span>;
  <span style="font-weight:bold;">background-color</span>: <span style="color:#27aeae;">$background</span>;
  <span style="font-weight:bold;">border-color</span>: <span style="color:#27aeae;">$border</span>;
}

<span style="color:#27aeae;">$values</span>: <span style="color:#27aeae;font-weight:bold;">#ff0000</span>, <span style="color:#27aeae;font-weight:bold;">#00ff00</span>, <span style="color:#27aeae;font-weight:bold;">#0000ff</span>;
<span style="color:#8e44ad;">.primary</span> {
  <span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">colors(</span><span style="color:#27aeae;">$values</span>...<span style="color:#8e44ad;">)</span>;
}

<span style="color:#27aeae;">$value-map</span>: (<span style="color:#f67400;">text</span>: <span style="color:#27aeae;font-weight:bold;">#00ff00</span>, <span style="color:#27aeae;font-weight:bold;">background</span>: <span style="color:#27aeae;font-weight:bold;">#0000ff</span>, border: <span style="color:#27aeae;font-weight:bold;">#ff0000</span>);
<span style="color:#8e44ad;">.secondary</span> {
  <span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">colors(</span><span style="color:#27aeae;">$value-map</span>...<span style="color:#8e44ad;">)</span>;
}

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">apply-to-ie6-only</span> {
  * html {
    <span style="color:#27ae60;">@content</span>;
  }
}
<span style="color:#27ae60;">@include</span> apply-to-ie6-only {
  <span style="color:#27ae60;font-weight:bold;">#logo</span> {
    <span style="font-weight:bold;">background-image</span>: <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">/logo.gif</span><span style="color:#8e44ad;">)</span>;
  }
}

<span style="color:#27aeae;">$grid-width</span>: <span style="color:#f67400;">40</span><span style="color:#2980b9;">px</span>;
<span style="color:#27aeae;">$gutter-width</span>: <span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span>;

<span style="color:#27ae60;">@function</span> <span style="color:#8e44ad;">grid-width</span>(<span style="color:#27aeae;">$n</span>) {
  <span style="color:#27ae60;">@return</span> <span style="color:#27aeae;">$n</span> * <span style="color:#27aeae;">$grid-width</span> + (<span style="color:#27aeae;">$n</span> - <span style="color:#f67400;">1</span>) * <span style="color:#27aeae;">$gutter-width</span>;
}

<span style="color:#27ae60;font-weight:bold;">#sidebar</span> { <span style="font-weight:bold;">width</span>: <span style="color:#8e44ad;">grid-width(</span><span style="color:#f67400;">5</span><span style="color:#8e44ad;">)</span>; }

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">unify-parent</span>(<span style="color:#27aeae;">$child</span>) {
  <span style="color:#27ae60;">@at-root</span> #{<span style="color:#8e44ad;">selector-unify(</span>&amp;, <span style="color:#27aeae;">$child</span><span style="color:#8e44ad;">)</span>} {
    <span style="color:#27ae60;">@content</span>;
  }
}

<span style="color:#c45b00;font-style:italic;">:root</span> {
  <span style="color:#27aeae;">--font-family-sans-serif</span>: #{<span style="color:#8e44ad;">inspect(</span><span style="color:#27aeae;">$font-family-sans-serif</span><span style="color:#8e44ad;">)</span>};
  <span style="color:#27aeae;">--font-family-monospace</span>: #{<span style="color:#8e44ad;">inspect(</span><span style="color:#27aeae;">$font-family-monospace</span><span style="color:#8e44ad;">)</span>};
}

div {
  <span style="font-weight:bold;">background-image</span>: <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">&quot;/icons/</span>#{<span style="color:#27aeae;">$name</span>}<span style="color:#f44f4f;">.svg&quot;</span><span style="color:#8e44ad;">)</span>;
  <span style="font-weight:bold;">font</span>: #{<span style="color:#f44f4f;">&quot;string&quot;</span>};

<span style="color:#8e44ad;">.icon-</span>#{<span style="color:#27aeae;">$name</span>} {
  <span style="font-weight:bold;">position</span>: <span style="color:#f67400;">absolute</span>;
  #{<span style="color:#27aeae;">$top-or-bottom</span>}: <span style="color:#f67400;">0</span>;
  -#{<span style="color:#27aeae;">$prefix</span>}-#{<span style="color:#27aeae;">$property</span>}: <span style="color:#27aeae;">$value</span>;
  <span style="color:#8e44ad;">.icon-</span>#{<span style="color:#27aeae;">$name</span>} {
    <span style="font-weight:bold;">position</span>: <span style="color:#f67400;">absolute</span>;
    #{<span style="color:#27aeae;">$top-or-bottom</span>}: <span style="color:#f67400;">0</span>;
    -#{<span style="color:#27aeae;">$prefix</span>}-#{<span style="color:#27aeae;">$property</span>}-image: <span style="color:#27aeae;">$value</span>
  }
}

<span style="color:#7a7c7d;">/*</span>
<span style="color:#7a7c7d;"> * SCSS Syntax Highlight Sample File (Standard)</span>
<span style="color:#7a7c7d;"> *</span>
<span style="color:#7a7c7d;"> * This file contains most SCSS syntax, CSS3 properties, advanced code structure.</span>
<span style="color:#7a7c7d;"> * It is NOT a valid SCSS file that can be compiled by SCSS preprocessors.</span>
<span style="color:#7a7c7d;"> *</span>
<span style="color:#7a7c7d;"> * @author  Guo Yunhe guoyunhebrave@gmail.com</span>
<span style="color:#7a7c7d;"> * @date    2016-09-15</span>
<span style="color:#7a7c7d;"> */</span>

<span style="color:#7a7c7d;">/*</span>
<span style="color:#7a7c7d;"> * Block comment</span>
<span style="color:#7a7c7d;"> *</span>
<span style="color:#7a7c7d;"> * Alert keywords:</span>
<span style="color:#7a7c7d;"> * </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">TODO</span><span style="color:#7a7c7d;"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">BUG</span><span style="color:#7a7c7d;"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">FIXME</span>
<span style="color:#7a7c7d;"> */</span>

<span style="color:#27ae60;">@charset</span> <span style="color:#f44f4f;">&quot;UTF-8&quot;</span>;

<span style="color:#27ae60;">@import</span> <span style="color:#f44f4f;">&quot;mixins/button&quot;</span>;

<span style="color:#7a7c7d;">// Variable define</span>

<span style="color:#27aeae;">$image-path</span>:            <span style="color:#f44f4f;">&quot;../../static/images&quot;</span>;
<span style="color:#27aeae;">$default-text-color</span>:    <span style="color:#27aeae;font-weight:bold;">#333</span> <span style="color:#2980b9;">!default</span>; <span style="color:#7a7c7d;">// Default can be overrided</span>
<span style="color:#27aeae;">$default-font-size</span>:     <span style="color:#f67400;">16</span><span style="color:#2980b9;">px</span> <span style="color:#2980b9;">!default</span>;
<span style="color:#27aeae;">$default-font-family</span>:   Roboto, <span style="color:#f44f4f;">&quot;Droid Sans&quot;</span>, <span style="color:#f67400;">sans-serif</span>;
<span style="color:#27aeae;">$default-font-weight</span>:   <span style="color:#f67400;">400</span>;
<span style="color:#27aeae;">$default-line-height</span>:   <span style="color:#27aeae;">$default-font-size</span> * <span style="color:#f67400;">1.8</span>;
<span style="color:#27aeae;">$shadow-transparence</span>:   <span style="color:#f67400;">0.25</span>;
<span style="color:#27aeae;">$box-shadow</span>:            <span style="color:#f67400;">0</span> <span style="color:#f67400;">0</span> <span style="color:#f67400;">3</span><span style="color:#2980b9;">px</span> <span style="color:#8e44ad;">rgba(</span><span style="color:#f67400;">0</span>,<span style="color:#f67400;">0</span>,<span style="color:#f67400;">0</span>,<span style="color:#27aeae;">$shadow-transparence</span><span style="color:#8e44ad;">)</span>;
<span style="color:#27aeae;">$page-width</span>:            <span style="color:#f67400;">100</span><span style="color:#2980b9;">rem</span>; <span style="color:#7a7c7d;">// kabab-case</span>
<span style="color:#27aeae;">$gapOfArticle</span>:          <span style="color:#f67400;">20</span><span style="color:#2980b9;">px</span>;   <span style="color:#7a7c7d;">// camelCase</span>
<span style="color:#27aeae;">$body_background_color</span>: <span style="color:#27aeae;font-weight:bold;">white</span>;  <span style="color:#7a7c7d;">// snake_case</span>

<span style="color:#7a7c7d;">// Mixins</span>

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">border-radius</span>(<span style="color:#27aeae;">$radius</span>) {
  <span style="font-weight:bold;">-webkit-border-radius</span>: <span style="color:#27aeae;">$radius</span>;
     <span style="font-weight:bold;">-moz-border-radius</span>: <span style="color:#27aeae;">$radius</span>;
      -ms-border-radius: <span style="color:#27aeae;">$radius</span>;
          <span style="font-weight:bold;">border-radius</span>: <span style="color:#27aeae;">$radius</span>;
}

<span style="color:#8e44ad;">.box</span> { <span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">border-radius(</span><span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>; }

<span style="color:#7a7c7d;">// Nesting</span>

<span style="color:#27ae60;font-weight:bold;">#home-page</span> {

    header {
        <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">80</span><span style="color:#2980b9;">%</span>;
        <span style="font-weight:bold;">margin</span>: <span style="color:#f67400;">0</span> <span style="color:#7f8c8d;">auto</span>;

        <span style="color:#8e44ad;">.cover</span> {
            <span style="color:#27ae60;">@include</span> <span style="color:#8e44ad;">border-radius(</span><span style="color:#f67400;">20</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>;
            <span style="font-weight:bold;">max-width</span>: <span style="color:#f67400;">100</span><span style="color:#2980b9;">%</span>;

            &amp;<span style="color:#c45b00;font-style:italic;">:hover</span> {
                <span style="font-weight:bold;">background</span>: <span style="color:#27aeae;font-weight:bold;">#ffffff</span>;
            }

            <span style="color:#8e44ad;">.like-button</span> {
                <span style="font-weight:bold;">font-size</span>: <span style="color:#27aeae;">$default-font-size</span> * <span style="color:#f67400;">0.8</span>;

                <span style="color:#27ae60;">@media</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#f67400;">300</span><span style="color:#2980b9;">px</span>) <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">min-width</span>: <span style="color:#f67400;">200</span><span style="color:#2980b9;">px</span>) {
                    <span style="font-weight:bold;">font-size</span>: <span style="color:#27aeae;">$default-font-size</span> * <span style="color:#f67400;">0.8</span>;

                    <span style="color:#8e44ad;">.icon</span> {
                        <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">20</span><span style="color:#2980b9;">px</span>;
                        <span style="font-weight:bold;">height</span>: <span style="color:#f67400;">20</span><span style="color:#2980b9;">px</span>;
                    }
                }

                <span style="color:#27ae60;">@media</span> <span style="color:#f67400;">print</span> {
                    <span style="font-weight:bold;">display</span>: <span style="color:#f67400;">none</span>;
                }
            }
        }
    }
}

<span style="color:#7a7c7d;">// Extend and inheritance</span>

<span style="color:#8e44ad;">.message</span> {
    <span style="font-weight:bold;">border</span>: <span style="color:#27aeae;">$border-light</span>;
    <span style="font-weight:bold;">background-color</span>: <span style="color:#27aeae;font-weight:bold;">#f0f0f0</span>;
}

<span style="color:#8e44ad;">.message-danger</span> {
    <span style="color:#27ae60;">@extend</span> <span style="color:#8e44ad;">.message</span>;
}


<span style="color:#7a7c7d;">// Control structures</span>

<span style="color:#27ae60;">@mixin</span> <span style="color:#8e44ad;">does-parent-exist</span> {
    <span style="color:#27ae60;">@if</span> &amp; {
        &amp;<span style="color:#c45b00;font-style:italic;">:hover</span> {
            <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">red</span>;
        }
    } <span style="color:#27ae60;">@else</span> {
        a {
            <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">red</span>;
        }
    }
}


<span style="color:#7a7c7d;">// Operators</span>

<span style="color:#8e44ad;">.container</span> { <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">100</span><span style="color:#2980b9;">%</span>; }

article<span style="color:#0099ff;font-weight:bold;">[role</span>=<span style="color:#f44f4f;">&quot;main&quot;</span><span style="color:#0099ff;font-weight:bold;">]</span> {
  <span style="font-weight:bold;">float</span>: <span style="color:#f67400;">left</span>;
  <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">600</span><span style="color:#2980b9;">px</span> / <span style="color:#f67400;">960</span><span style="color:#2980b9;">px</span> * <span style="color:#f67400;">100</span><span style="color:#2980b9;">%</span>;
}

aside<span style="color:#0099ff;font-weight:bold;">[role</span>=<span style="color:#f44f4f;">&quot;complementary&quot;</span><span style="color:#0099ff;font-weight:bold;">]</span> {
  <span style="font-weight:bold;">float</span>: <span style="color:#f67400;">right</span>;
  <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">300</span><span style="color:#2980b9;">px</span> / <span style="color:#f67400;">960</span><span style="color:#2980b9;">px</span> * <span style="color:#f67400;">100</span><span style="color:#2980b9;">%</span>;
}


<span style="color:#7a7c7d;">// Functions - see http://sass-lang.com/documentation/Sass/Script/Functions.html</span>

<span style="color:#27aeae;">$color1</span>: <span style="color:#8e44ad;">hsl(</span><span style="color:#f67400;">120</span><span style="color:#2980b9;">deg</span>, <span style="color:#f67400;">100</span><span style="color:#2980b9;">%</span>, <span style="color:#f67400;">50</span><span style="color:#2980b9;">%</span><span style="color:#8e44ad;">)</span>;
<span style="color:#27aeae;">$color2</span>: <span style="color:#8e44ad;">rgb(</span><span style="color:#27aeae;">$red</span>, <span style="color:#27aeae;">$green</span>, <span style="color:#8e44ad;">blue(</span><span style="color:#27aeae;">$color1</span><span style="color:#8e44ad;">))</span>;
<span style="color:#27aeae;">$color3</span>: <span style="color:#8e44ad;">mix(</span><span style="color:#27aeae;">$color1</span>, <span style="color:#27aeae;">$color2</span>, [<span style="color:#27aeae;">$weight</span>]<span style="color:#8e44ad;">)</span>;


<span style="color:#7a7c7d;">// Properties</span>

html, body {
    <span style="font-weight:bold;">font-family</span>: <span style="color:#f44f4f;">&quot;Droid Sans&quot;</span>, Arial, <span style="color:#f67400;">sans-serif</span>;
    <span style="font-weight:bold;">font-size</span>: <span style="color:#f67400;">11</span><span style="color:#2980b9;">pt</span>;
    <span style="font-weight:bold;">line-height</span>: <span style="color:#f67400;">1.5</span><span style="color:#2980b9;">em</span>;
    <span style="font-weight:bold;">max-width</span>: <span style="color:#f67400;">300</span><span style="color:#2980b9;">px</span> + <span style="color:#27aeae;">$page-width</span> - <span style="color:#27aeae;">$gap</span> / <span style="color:#f67400;">2</span>;
    <span style="font-weight:bold;">background</span>: <span style="color:#27aeae;">$bg_color</span>;
    <span style="font-weight:bold;">text-shadow</span>: <span style="color:#f67400;">0</span> <span style="color:#f67400;">0</span> <span style="color:#f67400;">2</span><span style="color:#2980b9;">px</span> <span style="color:#8e44ad;">rgba(</span><span style="color:#f67400;">0</span>,<span style="color:#f67400;">0</span>,<span style="color:#f67400;">0</span>, <span style="color:#27aeae;">$transparence</span><span style="color:#8e44ad;">)</span>;
    <span style="font-weight:bold;">box-sizing</span>: <span style="color:#f67400;">border-box</span>;
}


<span style="color:#7a7c7d;">// Selectors</span>

blockquote {
    <span style="font-weight:bold;">margin</span>: <span style="color:#f67400;">0</span>;
}

header <span style="color:#27ae60;font-weight:bold;">#logo</span> {
    <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">100</span><span style="color:#2980b9;">px</span>;
}

div<span style="color:#27ae60;font-weight:bold;">#footer</span> <span style="color:#8e44ad;">.link</span> {
    <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">blue</span>;
}

sidebar <span style="color:#27ae60;font-weight:bold;">#subscribe</span> <span style="color:#8e44ad;">.subscribe_form</span> input<span style="color:#0099ff;font-weight:bold;">[type</span>=<span style="color:#f44f4f;">&quot;text&quot;</span><span style="color:#0099ff;font-weight:bold;">]</span> {
    <span style="font-weight:bold;">font-size</span>: <span style="color:#f67400;">20</span><span style="color:#2980b9;">px</span>;
}

sidebar <span style="color:#27ae60;font-weight:bold;">#subscribe</span> <span style="color:#8e44ad;">.subscribe_form</span><span style="color:#c45b00;font-style:italic;">:nth-child(2n + 1):hover</span> input<span style="color:#0099ff;font-weight:bold;">[class</span>*=<span style="color:#f44f4f;">&quot;small-&quot;</span><span style="color:#0099ff;font-weight:bold;">]</span> {
    <span style="font-weight:bold;">font-weight</span>: <span style="color:#f67400;">bold</span>;
}


<span style="color:#7a7c7d;">// Media Queries</span>

<span style="color:#27ae60;">@media</span> <span style="color:#f67400;">print</span> {
    <span style="color:#8e44ad;">.container</span> {
        <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">100</span><span style="color:#2980b9;">%</span>;
    }
}

<span style="color:#27ae60;">@media</span> <span style="color:#f67400;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">min-width</span>: <span style="color:#f67400;">768</span><span style="color:#2980b9;">px</span>) {
    <span style="color:#8e44ad;">.container</span> {
        <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">600</span><span style="color:#2980b9;">px</span>;
    }
}

<span style="color:#27ae60;">@media</span> <span style="color:#f67400;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">min-width</span>: <span style="color:#f67400;">768</span><span style="color:#2980b9;">px</span>) <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#f67400;">960</span><span style="color:#2980b9;">px</span>) {
    <span style="color:#8e44ad;">.container</span> {
        <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">720</span><span style="color:#2980b9;">px</span>;
    }
}


<span style="color:#7a7c7d;">// Fontface</span>

<span style="color:#27ae60;">@font-face</span> {
    <span style="font-weight:bold;">font-family</span>: MyHelvetica;
    <span style="font-weight:bold;">src</span>: <span style="color:#8e44ad;">local(</span><span style="color:#f44f4f;">&quot;Helvetica Neue Bold&quot;</span><span style="color:#8e44ad;">)</span>,
        <span style="color:#8e44ad;">local(</span><span style="color:#f44f4f;">&quot;HelveticaNeue-Bold&quot;</span><span style="color:#8e44ad;">)</span>,
        <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">MgOpenModernaBold.ttf</span><span style="color:#8e44ad;">)</span>;
    <span style="font-weight:bold;">font-weight</span>: <span style="color:#f67400;">bold</span>;
}

<span style="color:#7a7c7d;">// Animation (Keyframes)</span>

<span style="color:#27ae60;">@keyframes</span> slidein {
    <span style="color:#f67400;">from</span> {
        <span style="font-weight:bold;">margin-left</span>: <span style="color:#f67400;">100</span><span style="color:#2980b9;">%</span>;
        <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">300</span><span style="color:#2980b9;">%</span>;
    }

    <span style="color:#f67400;">to</span> {
        <span style="font-weight:bold;">margin-left</span>: <span style="color:#f67400;">0</span><span style="color:#2980b9;">%</span>;
        <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">100</span><span style="color:#2980b9;">%</span>;
    }
}

<span style="color:#7a7c7d;">/*</span>
<span style="color:#7a7c7d;"> * SCSS Syntax Highlight Sample File (Complex)</span>
<span style="color:#7a7c7d;"> *</span>
<span style="color:#7a7c7d;"> * This file contains complex SCSS syntax that can test unexpected situations.</span>
<span style="color:#7a7c7d;"> * It is NOT a valid SCSS file that can be compiled by SCSS preprocessors.</span>
<span style="color:#7a7c7d;"> *</span>
<span style="color:#7a7c7d;"> * @author  Guo Yunhe guoyunhebrave@gmail.com</span>
<span style="color:#7a7c7d;"> * @date    2016-09-16</span>
<span style="color:#7a7c7d;"> */</span>


<span style="color:#7a7c7d;">// Comments with special content</span>

<span style="color:#7a7c7d;">// .class-selector #id &quot;string&quot; 'comment' // comment {} [] () /* comment */ text</span>

<span style="color:#7a7c7d;">/*</span>
<span style="color:#7a7c7d;"> * .class-selector #id &quot;string&quot; 'comment' // comment {} [] ()  /* comment</span>
<span style="color:#7a7c7d;"> * </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">TODO</span><span style="color:#7a7c7d;"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">BUG</span><span style="color:#7a7c7d;"> DEBUG</span>
<span style="color:#7a7c7d;"> * body {</span>
<span style="color:#7a7c7d;"> *    margin: 0 !important;</span>
<span style="color:#7a7c7d;"> * }</span>
<span style="color:#7a7c7d;"> */</span>

<span style="color:#7a7c7d;">// Comments in special positions</span>

<span style="color:#27aeae;">$color</span>: <span style="color:#27aeae;font-weight:bold;">black</span> <span style="color:#7a7c7d;">/* comment here */</span>;

header<span style="color:#7a7c7d;">/* comment here */</span><span style="color:#8e44ad;">.active</span> <span style="color:#7a7c7d;">/* comment here */</span> {
    <span style="color:#7a7c7d;">/* comment here */</span> <span style="font-weight:bold;">color</span> : <span style="color:#7a7c7d;">/* comment here */</span> <span style="color:#27aeae;font-weight:bold;">blue</span><span style="color:#7a7c7d;">/* comment here */</span>;
    <span style="font-weight:bold;">font-family</span>: Arial <span style="color:#7a7c7d;">/* comment here */</span>,
        <span style="color:#f44f4f;">&quot;Droid Sans&quot;</span>, <span style="color:#7a7c7d;">/* comment here */</span>
        <span style="color:#f67400;">sans-serif</span><span style="color:#7a7c7d;">/* comment here */</span>;
}

<span style="color:#27ae60;">@media</span> <span style="color:#f67400;">screen</span> <span style="color:#7a7c7d;">/* comment here */</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#f67400;">300</span><span style="color:#2980b9;">px</span> <span style="color:#7a7c7d;">/* comment here */</span>) <span style="color:#7a7c7d;">/* comment here */</span> {<span style="color:#7a7c7d;">/* comment here */</span>}


<span style="color:#7a7c7d;">// Strings with special content</span>

<span style="color:#27ae60;">@import</span> <span style="color:#f44f4f;">&quot;{} $variable /* comment */&quot;</span>;
<span style="color:#27ae60;">@import</span> <span style="color:#f44f4f;">&quot;{}&quot;</span>;

<span style="color:#7a7c7d;">// Without extra breaklines and spaces</span>

pre<span style="color:#8e44ad;">.primary</span><span style="color:#c45b00;font-style:italic;">:hover</span><span style="color:#8e44ad;">.large</span><span style="color:#c45b00;font-style:italic;">:nth-child(2n-1)</span>{<span style="font-weight:bold;">font-size</span>:<span style="color:#27aeae;">$default-font-size</span>;<span style="font-weight:bold;">font-family</span>:<span style="color:#f44f4f;">&quot;Noto Sans&quot;</span>;<span style="font-weight:bold;">-webkit-box-shadow</span>:<span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">3</span><span style="color:#2980b9;">px</span> <span style="color:#8e44ad;">rgba(</span><span style="color:#f67400;">0</span>,<span style="color:#f67400;">0</span>,<span style="color:#f67400;">0</span>,<span style="color:#f67400;">0.3</span><span style="color:#8e44ad;">)</span>}

<span style="color:#7a7c7d;">// With unnecessary breaklines and spaces</span>

blockquote <span style="color:#8e44ad;">.ref</span>
    {
             <span style="font-weight:bold;">flex</span> : <span style="color:#f67400;">0</span> <span style="color:#f67400;">1</span> <span style="color:#f67400;">30</span><span style="color:#2980b9;">%</span>;
        <span style="font-weight:bold;">flex-wrap</span> : wrap;
    }

<span style="color:#8e44ad;">.sidebar</span> {
  <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">300</span><span style="color:#2980b9;">px</span>; }
  <span style="color:#27ae60;">@media</span> <span style="color:#f67400;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">orientation</span>: <span style="color:#f67400;">landscape</span>) {
    <span style="color:#8e44ad;">.sidebar</span> {
      <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">500</span><span style="color:#2980b9;">px</span>; } }

<span style="color:#7a7c7d;">// Variable interpolation: #{}</span>

<span style="color:#27aeae;">$name</span>: foo;
<span style="color:#27aeae;">$attr</span>: border;
p<span style="color:#8e44ad;">.</span>#{<span style="color:#27aeae;">$name</span>} {
    #{<span style="color:#27aeae;">$attr</span>}-color: <span style="color:#27aeae;font-weight:bold;">blue</span>;
}

p {
    <span style="color:#27aeae;">$font-size</span>: <span style="color:#f67400;">12</span><span style="color:#2980b9;">px</span>;
    <span style="color:#27aeae;">$line-height</span>: <span style="color:#f67400;">30</span><span style="color:#2980b9;">px</span>;
    <span style="font-weight:bold;">font</span>: #{<span style="color:#27aeae;">$font-size</span>}/#{<span style="color:#27aeae;">$line-height</span>};
}

<span style="color:#7a7c7d;">// Special selectors: HTML5 allows user defined tags</span>

header {
    flex {
        <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">300</span><span style="color:#2980b9;">px</span>;
    }
}
</pre></body></html>
